<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- element样式 -->
		<link rel="stylesheet" href="../index.css" />
		
		<script src="../vue.js"></script>
		<!-- element组建 -->
		<script src="../index.js"></script>
	</head>
	<body>
		<div id="app">
			<!--
				rules：表单验证规则
			-->
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<!--
					prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
				-->
				<el-form-item label="活动名称" prop="name">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="活动区域" prop="region">
					<el-select v-model="form.region" placeholder="请选择活动区域">
						<el-option label="区域一" value="shanghai"></el-option>
						<el-option label="区域二" value="beijing"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="活动时间">
					<el-col :span="11">
						<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
					</el-col>
					<el-col class="line" :span="2">-</el-col>
					<el-col :span="11">
						<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
					</el-col>
				</el-form-item>
				<el-form-item label="即时配送">
					<el-switch v-model="form.delivery"></el-switch>
				</el-form-item>
				<el-form-item label="活动性质">
					<el-checkbox-group v-model="form.type">
						<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
						<el-checkbox label="地推活动" name="type"></el-checkbox>
						<el-checkbox label="线下主题活动" name="type"></el-checkbox>
						<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="特殊资源">
					<el-radio-group v-model="form.resource">
						<el-radio label="线上品牌商赞助"></el-radio>
						<el-radio label="线下场地免费"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="活动形式">
					<el-input type="textarea" v-model="form.desc"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">立即创建</el-button>
				</el-form-item>
			</el-form>
		</div>
	
		<script>
			new Vue({
				el:'#app',
				data:{
					form: {
						name: '',
						region: '',
						date1: '',
						date2: '',
						delivery: false,
						type: [],
						resource: '',
						desc: ''
					},
					//定义校验规则
					rules: {
						name: [
							{ required: true, message: '请输入活动名称', trigger: 'blur' },
							{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
						],
						region: [
							{ required: true, message: '请选择活动区域', trigger: 'change' }
						]
					}
				},
				methods:{
					onSubmit(){
						//进行输入校验
						this.$refs['form'].validate((valid)=>{
							alert(valid);
						});
					}
				}
			});
		</script>
	</body>
</html>
